﻿@{
    Layout = null;
}
<style>
</style>
<form id="Product_form" onkeydown="if(event.keyCode==13){return false;}">
    <div class="row">
        <div class="col-xs-3 col-md-3 text-right">
            <span class="red-700">*</span> 批次名称：
        </div>
        <div class="col-xs-5 col-md-5">
            <input class="form-control" type="text" name="BatchName" value="" placeholder="请输入批次名称" maxlength="25" />
        </div>
    </div>

    <div class="row">
        <div class="col-xs-3 col-md-3 text-right">
            <span class="red-600">*</span>&nbsp;生产时间:
        </div>
        <div class="col-xs-5 col-md-5">
            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" style="padding: 0; ">
                <input class="form-control" type="text" value="" readonly="readonly" id="ProductionDate" name="ProductionDate" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; ">
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="background: #EEE; text-align: center; line-height: 2.3em; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; ">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>



    </div>

    <div class="row">

        <div class="col-xs-3 col-md-3 text-right">
            <span class="red-600">*</span>&nbsp;上市时间:
        </div>
        <div class="col-xs-5 col-md-5">
            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" style="padding: 0; ">
                <input class="form-control" type="text" value="" readonly="readonly" id="TimeToMarket" name="TimeToMarket" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; ">
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="background: #EEE; text-align: center; line-height: 2.3em; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; ">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>


    </div>




    <div class="row">
        <div class="col-xs-3 col-md-3 text-right">
            <span class="red-700">*</span> 绑定类型：

        </div>
        <div class="col-xs-5 col-md-5">
            <div class="col-xs-6 col-md-6">
                <input type="radio" name="ProductBindType" value="0" checked />绑定单品
            </div>
            <div class="col-xs-6 col-md-6">
                <input type="radio" name="ProductBindType" value="1" />绑定多产品
            </div>
        </div>
    </div>
    <div id="ProductId" class="row">
        <div class="col-xs-3 col-md-3  text-right">
            <span class="red-700">*</span>产品名称：
        </div>
        <div class="col-xs-5 col-md-5">
            @Html.DropDownList("ProductId", null, new { @class = "form-control" })
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 col-md-3  text-right">
            H5页面：
        </div>
        <div class="col-xs-5 col-md-5">
            <label class="col-xs-6 col-md-6">
                <input type="radio" value="0" checked="checked" name="IsNewMaterial" />&nbsp;从版本
            </label>
            <label class="col-xs-6 col-md-6">
                <input type="radio" value="1" name="IsNewMaterial" />&nbsp;素材库
            </label>
        </div>
    </div>
    <div class="row IsNewMaterial">
        <div class="col-xs-3 col-md-3  text-right">
            所属版本：
        </div>
        <div class="col-xs-5 col-md-5">
            <select class="form-control" name="Version">
                <option value="0">标准</option>
                <option value="1">黄金</option>
                <option value="2">白金</option>
                <option value="3">钻石</option>
            </select>
        </div>
    </div>
    <div class="row IsNewMaterial" style="display:none">
        <div class="col-xs-3 col-md-3  text-right">
            素材：
        </div>
        <div class="col-xs-5 col-md-5">
            @Html.DropDownList("MaterialId", null, new { @class = "form-control" })
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 col-md-3  text-right">
            备注：
        </div>
        <div class="col-xs-5 col-md-5">
            <input type="text" name="Remark" value="" class="form-control" />
        </div>
    </div>
</form>
<script>

    var ProductionDate = undefined; TimeToMarket = undefined;

    // 生产时间
    $("#ProductionDate").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        //todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
    }).on('hide', function (e) {
        $('#Product_form').data('bootstrapValidator')
            .updateStatus('ProductionDate', 'NOT_VALIDATED', null)
            .validateField('ProductionDate');
    }).on('changeDate', function (e) {
        var ProductionDate = e.date;
        $('#TimeToMarket').datepicker('setStartDate', ProductionDate);
    });
    // 上市时间
    $("#TimeToMarket").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        //todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        startDate: ProductionDate
    }).on('hide', function () {
        $('#Product_form').data('bootstrapValidator')
            .updateStatus('TimeToMarket', 'NOT_VALIDATED', null)
            .validateField('TimeToMarket');
    })









    $(function () {
        $('#Product_form').bootstrapValidator({
            group: '.col-xs-5.col-md-5',
            fields: {
                BatchName: {
                    validators: {
                        notEmpty: {
                            message: '批次名称不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                            message: '批次名称不能输入符号'
                        },
                        stringLength: {
                            max: 25,
                            message: '批次名称最大长度为25'
                        }
                    }
                },
                ProductId: {
                    validators: {
                        notEmpty: {
                            message: '产品名称不能为空'
                        },

                    }
                },

                ProductionDate: {
                    validators: {
                        notEmpty: {
                            message: '生产日期不能为空'
                        }
                    }
                },
                TimeToMarket: {
                    validators: {
                        notEmpty: {
                            message: '上市日期不能为空'
                        }
                    }
                },


                //MaterialId: {
                //    validators: {
                //        notEmpty: {
                //            message: '素材不能为空'
                //        },

                //    }
                //},
                //Virsion: {
                //    validators: {
                //        notEmpty: {
                //            message: '所属版本不能为空'
                //        },

                //    }
                //},
            }
        });
    })
    $("input[name='IsNewMaterial']").on("click", function () {
        var index_ = $("input[name='IsNewMaterial']").index($(this));
        //console.log(index_)
        $(".IsNewMaterial").hide();
        $(".IsNewMaterial").eq(index_).show();
    })
    
    $("input[name='ProductBindType']").on("click", function () {
        var _index = $("input[name='ProductBindType']").index($(this))
        if ( _index == 0 ) {
            $("#ProductId").show()
        } else {
            $("#ProductId").hide()
        }
    })
</script>

